<script setup lang="ts">
import {reactive} from "vue";

// 定义一个使用的接口
interface Person {
  name: string;
  gender: string;
  age: number;
}

// 创建一个响应式对象，使用定义的 Person 接口进行限定
let person = reactive<Person>({
  name: "abcque",
  gender: "M",
  age: 18,
})

setInterval(
    () => {
      // 访问响应式对象直接访问属性即可
      person.age = person.age + 1
      console.log("age: " + person.age);
    },
    1000,
)
</script>

<template>
  <h1>姓名：{{ person.name }}</h1>
  <h1>性别：{{ person.gender }}</h1>
  <h1>年龄：{{ person.age }}</h1>
</template>

<style scoped>

</style>